<!--
*@Author: QWP
*@Description: 收文统计
*@Date 2024-09-10 18:24
-->
<template>
  <a-layout class="f-h-100">
    <u-table-header style="height: calc(40% - 8px); background: unset; padding: 0">
      <a-row class="f-h-100" :gutter="16">
        <a-col :span="24">
          <u-busi-card title="当年收文数量" class="f-h-100">
            <template #extra>
              <DateChange v-model:value="deptDate" :allowClear="false" mode="year" picker="year" format="YYYY年"
                valueFormat="YYYY" @change="(date) => {
                  deptDate = date,
                    getAnalazyData()
                }">
              </DateChange>
            </template>
            <BarChart :option="monthTravelData" />
          </u-busi-card>
        </a-col>
      </a-row>
    </u-table-header>
    <a-layout style="height: calc(60% - 8px)" class="f-margin-t16">
      <InconemDocPage :isReport="true" />
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import dayjs from "dayjs";
import { cloneDeep } from 'lodash'
import * as docApi from '@/service/officialDoc/incomeDoc'
import BarChart from '@/views/oa/report/components/BarChart.vue'
import DateChange from '@/views/oa/report/components/DateChange.vue'
import InconemDocPage from '@/views/oa/officialDoc/incoming/Index.vue'
import { groupBy1 } from "@/util/format.ts"
import { numberC } from "@/util/common";
import { addC } from "@/util/computePtrcision.ts";

const route = useRoute();
const router = useRouter();

onMounted(() => {
  getAnalazyData()
})

const monthTravelData = ref<any[]>()
const deptDate = ref<string>(dayjs().format('YYYY'))
const getAnalazyData = async () => {
  try {
    const res = await docApi.groupbyMonthAndUrgencyDegree({ model: { docType: 2, year: deptDate.value, } })
    if (res.code == 0) {
      let tData = res.data || [];
      tData.forEach(item => {
        if (!item['urgencyDegree']) {
          item['urgencyDegree'] = 5
        }
      })
      let monthGroup = groupBy1(tData, 'yearandmoth', false)
      crateData(monthGroup)
    }
  } catch (error) { }
}

// 生成图表数据
const crateData = (groupData) => {
  let keys = Object.keys(groupData).sort((a, b) => dayjs(a['yearandmoth']) - dayjs(b['yearandmoth']))
  let totals = [], em1 = [], em2 = [], em3 = [], em4 = [], em5 = [];
  keys.forEach(k => {
    let items = groupData[k] || []
    totals.push(calcNumber(items))
    em1.push(calcNumber(items.filter(i => i.urgencyDegree == 1)))
    em2.push(calcNumber(items.filter(i => i.urgencyDegree == 2)))
    em3.push(calcNumber(items.filter(i => i.urgencyDegree == 3)))
    em4.push(calcNumber(items.filter(i => i.urgencyDegree == 4)))
    em5.push(calcNumber(items.filter(i => i.urgencyDegree == 5)))
  })

  monthTravelData.value = {
    xAxis: [
      {
        type: 'category',
        data: keys.map(i => dayjs(i).format('M月')),
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    grid: {
      left: '1%',
      right: '1%',
    },
    yAxis: {
      minInterval: 1
    },
    series: [
      {
        name: '发行数量',
        type: 'bar',
        barWidth: '60%',
        barMaxWidth: 60,
        data: totals
      },
      {
        name: '正常',
        type: 'line',
        stack: 'Total',
        color: '#1890ff',
        data: em1
      },
      {
        name: '重要',
        type: 'line',
        stack: 'Total',
        color: '#73D13D',
        data: em2
      },
      {
        name: '紧急',
        type: 'line',
        stack: 'Total',
        color: '#FFA940',
        data: em3
      },
      {
        name: '特急',
        type: 'line',
        stack: 'Total',
        color: '#FF4D4F',
        data: em4
      },
      {
        name: '其他',
        type: 'line',
        stack: 'Total',
        data: em5
      },
    ]
  }
}

// 计算数量
const calcNumber = (data: any[]) => {
  let total = 0;
  return [0, ...data.map(i => numberC(i['no']))].reduce((a, b) => addC(a, b))
}
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
